<template>
  <view class="window-wrap">
    <view class="top-box clearfix">
      <view class="btn" @click="handleDown">下载二维码</view>
    </view>
    <view class="qrcode-box">
      <view class="qrcode-img">
        <image :src="qrcodeUrl" class="qrcode-img"></image>
      </view>
      <view class="desc">打开微信扫一扫进入联盟带货机构主页预览</view>
    </view>
    <view class="bottom-text">
      下载二维码添加酒华仕商品进入个人橱窗
    </view>
  </view>
</template>
<script>
  export default {
    component: {

    },
    data() {
      return {
        // qrcodeUrl: 'https://web.jiuhuashi.cn/uploads/poster/qrcode_window.png',
        qrcodeUrl: '',
      }
    },
    onLoad(option) {
      console.log(option);
      this.qrcodeUrl = option.qrcode;
    },
    methods: {
      handleDown() {
        console.log(123);
        uni.downloadFile({//下载
          url: this.qrcodeUrl, //图片下载地址
          success: res => {
            console.log(res);
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({//保存图片到系统相册。
                filePath: res.tempFilePath,//图片文件路径
                success: function() {
                  uni.showToast({
                    title: '图片保存成功',
                    icon: 'none',
                  });
                },
                fail: function(e) {
                  console.log(e);
                  uni.showToast({
                    title: '图片保存失败',
                    icon: 'none',
                  });
                }
              });
            }
          }
        });
      },
    }
  }
</script>
<style scoped>

.top-box {
  height: 300rpx;
}
.clearfix {
  display: block;
  content: "";
  clear: both;
}
.window-wrap {
  margin: 20rpx;
}

.btn {
  float: right;
  border: 1rpx solid #f00;
  padding: 10rpx;
  font-size: 24rpx;
  background: #f00;
  color: #fff;
  border-radius: 60rpx;
}

.qrcode-box {
  text-align: center;
  border: 1rpx solid #ccc;
  width: 300rpx;
  height: 300rpx;
  padding: 30rpx;
  margin: 0 auto;
  border-radius: 20rpx;
}

.qrcode-img {
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto 20rpx;
}

.desc {
  font-size: 24rpx;
}

.bottom-text {
  text-align: center;
  font-size: 28rpx;
  margin-top: 20rpx;
  font-weight: 600;
}
</style>